/* jshint esversion:6 */
import Vue from 'vue';
import VueRouter from 'vue-router';
// 懒加载的形式-动态加载组件
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue');
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue');
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue');
// import Login from '../components/Login.vue';
// import Home from '../components/Home.vue';
// import Welcome from '../components/Welcome.vue';
const Users = () => import(/* webpackChunkName: "users_roles_rights" */ '../components/user/Users.vue');
const Roles = () => import(/* webpackChunkName: "users_roles_rights" */ '../components/power/Roles.vue');
const Rights = () => import(/* webpackChunkName: "users_roles_rights" */ '../components/power/Rights.vue');
// import Users from '../components/user/Users.vue';
// import Roles from '../components/power/Roles.vue';
// import Rights from '../components/power/Rights.vue';
const GoodsList = () => import(/* webpackChunkName: "list_add" */ '../components/goods/GoodsList.vue');
const GoodsAdd = () => import(/* webpackChunkName: "list_add" */ '../components/goods/GoodsAdd.vue');
// import GoodsList from '../components/goods/GoodsList.vue';
// import GoodsAdd from '../components/goods/GoodsAdd.vue';
const CateParams = () => import(/* webpackChunkName: "cate_params" */ '../components/goods/CateParams.vue');
const GoodsCate = () => import(/* webpackChunkName: "cate_params" */ '../components/goods/GoodsCate.vue');
// import CateParams from '../components/goods/CateParams.vue';
// import GoodsCate from '../components/goods/GoodsCate.vue';
const OrderList = () => import(/* webpackChunkName: "order_reports" */ '../components/orders/OrderList.vue');
const Reports = () => import(/* webpackChunkName: "order_reports" */ '../components/reports/Reports.vue');
// import OrderList from '../components/orders/OrderList.vue';
// import Reports from '../components/reports/Reports.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  // 后台主页路由
  {
    name: 'home',
    path: '/home',
    component: Home,
    // 1.重丁香路由不能写死---在
    // 1.1 /home路径重定向到了/welcome，组件使用的还是Home组件，加上子路由对应的组件Welcome
    // 1.2 /home路径重定向到了/user,组件使用的是Home组件，加上子路由对应的组件User
    redirect: '/welcome',
    // 该子路由对应的占位符是Home.vue中的router-view
    children: [
      { path: '/welcome', component: Welcome },
      { path: '/users', component: Users },
      { path: '/roles', component: Roles },
      { path: '/rights', component: Rights },
      { path: '/goods', component: GoodsList },
      { path: '/goods/add', component: GoodsAdd },
      { path: '/params', component: CateParams },
      { path: '/categories', component: GoodsCate },
      { path: '/orders', component: OrderList },
      { path: '/reports', component: Reports }
    ]
  }
];

const router = new VueRouter({
  routes
});
/* 需求：
除了登录（/login）页面，其他页面需要有token令牌才能查看到该页面，没有token就返回登录页面
解决：使用路由导航守卫
参数：
  参数1.to 该路由即将跳转的路径------to.path属性获取路径字符串
  参数2.from 该路由从哪个路径跳转过来
  参数3.next 根据路由行为，做出相应的应对 next()---表示放行，next方法有参数，参数表示要放行到哪个路径next('路径')
*/
router.beforeEach((to, from, next) => {
  // 1.如果是登录页面，就直接放行了
  if (to.path === '/login') return next();
  // 2.to.path值为 非login页面的情形
  const sessionToken = sessionStorage.getItem('token');
  // 2.1 如果是非/login页面，且没有携带token令牌，则不能放行，返回到登录页面
  if (!sessionToken) return next('/login');
  // 2.2 如果是非/login页面，且携带token令牌，可以正常放行
  next();
});
console.log(router);
export default router;
